<template>
  <!-- <div class="spin-content">
    <a-row>
      <a-col :span="colSpan">
        <a-descriptions title="上报内容" :column="3">
          <a-descriptions-item :span="3">
            <span slot="label" class="fore-descriptions-item-label">上报日期</span>
            {{ infoData.addTime }}
          </a-descriptions-item>
          <a-descriptions-item :span="3">
            <span slot="label" class="fore-descriptions-item-label">问题等级</span>
            {{ infoData.ProblemLevelName }}
          </a-descriptions-item>
          <a-descriptions-item :span="3">
            <span slot="label" class="fore-descriptions-item-label">上报人</span>
            {{ infoData.AddUserName }}
          </a-descriptions-item>
          <a-descriptions-item :span="3">
            <span slot="label" class="fore-descriptions-item-label">问题描述</span>
            {{ infoData.problemContext }}
          </a-descriptions-item>
          <a-descriptions-item :span="3">
            <span slot="label" class="fore-descriptions-item-label">整改要求</span>
            {{ infoData.rectificationRequirements }}
          </a-descriptions-item>
          <a-descriptions-item :span="2">
            <span slot="label" class="fore-descriptions-item-label">现场照片</span>
            <span v-for="(befor, index) in infoData.ProblemImgBefores" :key="index">
              <a-popover title="">
                <template slot="content">
                  <img :src="befor.url" width="300px" height="auto" :alt="befor.NewFileName" />
                </template>
                <img :src="befor.url" width="150px" height="150px" :alt="befor.NewFileName" />
              </a-popover>
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </div> -->

  <div class="mobile">
    <a-list :data-source="dataLabel" size="small">
      <a-list-item slot="renderItem" slot-scope="item2, index">
        <a-list-item-meta :description="item2.label" class="meta"> </a-list-item-meta>
        <template v-if="item2.label === '问题图片'">
          <span v-for="(befor, index) in infoData.ProblemImgBefores" :key="index">
            <a-popover title="">
              <template slot="content">
                <img :src="befor.url" width="100%" height="100%" :alt="befor.NewFileName" />
              </template>
              <img :src="befor.url" width="150px" height="150px" :alt="befor.NewFileName" />
            </a-popover>
          </span>
        </template>

        <div v-else-if="item2.label === '上报日期'" class="detail">
          {{ tranDate(infoData[item2.prop]) }}
        </div>
        <div v-else class="detail">{{ infoData[item2.prop] }}</div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapActions, mapGetters } from 'vuex'
import { tranDate } from '@/utils/util'

import { getDetailByEncryptionID } from '@/api/project'

export default {
  components: {},
  props: {
    actionType: {
      type: String,
      required: false,
      default: 'add'
    }
  },
  created() {
    const phID = this.$route.query.ID
    setTimeout(() => { this.initData({ phID: phID }) }, 2000)
  },
  mounted() { },
  data() {
    return {
      a: null,
      action: 'add',
      headers: {},
      currentId: null,
      CodeDisabled: false,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: '查看',
      visible: false,
      okText: '保存',
      cancelText: '取消',
      infoData: {},
      tranDate: tranDate,
      colSpan: 20,
      dataLabel: [
        {
          label: '工程名称',
          prop: 'ProjectName',
        },
        {
          label: '上报日期',
          prop: 'addTime',
        },
        {
          label: '问题等级',
          prop: 'ProblemLevelName',
        },
        {
          label: '问题描述',
          prop: 'problemContext',
        },
        {
          label: '整改要求',
          prop: 'rectificationRequirements',
        },
        {
          label: '问题图片',
          prop: 'ProblemImgBefores',
        }
      ]
    }
  },
  watch: {},
  computed: { ...mapGetters(['token']) },
  methods: {
    initData(data) {
      this.spinning = true
      getDetailByEncryptionID(data)
        .then(res => {
          const info = res.data
          info.ProblemImgBefores.map(befor => {
            befor.url = `${process.env.VUE_APP_API_BASE_URL}${befor.Path}/${befor.NewFileName}`
          })
          info.ProblemImgAfters.map(after => {
            after.url = `${process.env.VUE_APP_API_BASE_URL}${after.Path}/${after.NewFileName}`
          })
          this.infoData = info
        })
        .finally(() => {
          this.spinning = false
        })
    },
    getImg(str) {
      const url = `${process.env.VUE_APP_API_BASE_URL}${str}`
      return url
    }
  },
}
</script>
<style lang="less" scoped>
.mobile {
  margin: 1rem;
}

.ant-list-item-meta-description {
  color: #3b3b3b;
}

.detail {
  color: #626263;
}
</style>
